<template>
  <div class="resume">
    <div class="about">
      <h1 class="name">丁越</h1>
      <div class="intention">求职意向:
        <span>Java、Go后端工程师</span>
      </div>
      <div class="info">
        <div class="info-title">个人信息：</div>
        <div class="info-item">
          <i class="icon school"></i>
          <span>仙桃职业学院(专科)</span>
        </div>
        <div class="info-item">
          <i class="icon major"></i>
          <span>软件工程(2022毕业)</span>
        </div>
        <div class="info-item">
          <i class="icon phone"></i>
          <span>13117244825</span>
        </div>
        <div class="info-item">
          <i class="icon email"></i>
          <span>2321550282@qq.com</span>
        </div>
        <span>反馈</span>
      </div>
    </div>
    <div class="power">
      <div class="power-item">
        <div class="title">
          <i class="icon technology"></i>
          <span class="name">技术栈</span>
        </div>
        <div class="technology-item">
        </div>
        <div class="technology-item">
          <span>【数据库】</span>MySql
        </div>
        <div class="technology-item">
          <span>【版本管理】</span>git
        </div>
      </div>
      <div class="power-item">
        <div class="title">
          <i class="icon evaluation"></i>
          <span class="name">个人评价</span>
        </div>
        <div class="my-evaluation">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Resume',
  computed: {
    ...mapState([
      'user'
    ])
  }

}
</script>

<style lang="stylus" scoped>
.resume
    display: flex
    height: 100%
    .about
        width: 250px
        background-color: rgb(36,70,100)
        padding: 10px
        box-sizing: border-box
        color: #fff
        .name
            text-align: center
            margin: 20px auto 40px
            font-size: 28px
            font-weight: 600
        .intention
            font-size: 20px
            span
                display: block
                text-align: right
                font-size: 16px
                line-height: 18px
                margin: 20px 0
                letter-spacing: 1px
        .info
            .info-title
                font-size: 20px
            .info-item
                display: flex
                margin: 10px 0 20px 0
                height: 40px
                line-height: 40px
                .icon
                    width: 40px
                    height: 40px
                    background-color: #fff
                    border-radius: 50%
                    margin-right: 20px
                    background-position: center
                    background-repeat: no-repeat
                    background-size: 26px
                    &.school
                        background-image: url(school.png)
                    &.major
                        background-image: url(major.png)
                    &.phone
                        background-image: url(phone.png)
                        background-size: 32px
                    &.email
                        background-image: url(email.png)
    .power
        flex: 1
        overflow-y: auto
        padding: 70px 50px 30px 50px
        background-color: #fff
        .power-item
            color: rgb(36,70,100)
            .title
                display: flex
                margin-bottom: 20px
                .icon
                    display: inline-block
                    width: 50px
                    height: 50px
                    background-color: rgb(36,70,100)
                    border-radius: 50%
                    margin-right: 10px
                    background-position: center
                    background-repeat: no-repeat
                    background-size: 30px
                    &.technology
                        background-size: 35px
                        background-image: url(technology.png)
                    &.evaluation
                        background-image: url(evaluation.png)
                .name
                    flex: 1
                    display: inline-block
                    height: 50px
                    font-size: 24px
                    font-weight: 600
                    line-height: 50px
                    box-sizing: border-box
                    border-bottom: 2px solid rgb(36,70,100)
            .technology-item
                margin: 20px auto
                font-size: 14px
                line-height: 25px
                display: flex
                span
                    display: inline-block
                    font-size: 18px

</style>
